<script setup lang="ts">
import type { ArticleInfo } from '@/types/article.ts';
import useReadingTime from '@/hooks/reading.ts';
import useFormatDate from '../../../hooks/formatDate.ts';

const props = defineProps<{
  articleInfo: ArticleInfo;
}>();
const { readingTime } = useReadingTime(props.articleInfo.content);
</script>

<template>
  <div class="article-header">
    <h1 class="title">{{ articleInfo.title }}</h1>
    <div class="meta-info">
      <div class="meta-item">
        <span class="category">📌 {{ articleInfo.categoryName }}</span>
      </div>
      <div class="meta-item">
        <time :datetime="articleInfo.publishTime">
          发布于 {{ useFormatDate(articleInfo.publishTime) }}
        </time>
      </div>
      <div class="meta-item">
        <span>🔥 {{ articleInfo.views }} 阅读</span>
      </div>
      <div class="meta-item">
        <span>⌛️ {{ readingTime }} 分钟阅读</span>
      </div>
    </div>
    <div class="divider"></div>
  </div>
</template>

<style scoped lang="less">
.article-header {
  text-align: center;
  padding: 48px 0 0;

  .title {
    font-size: 2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 32px;
  }

  .meta-info {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 14px;
    margin-bottom: 32px;

    .meta-item {
      margin: 0 16px;

      span, time {
        display: inline-flex;
        align-items: center;
      }
    }
  }

  .divider {
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    margin: 0;
  }
}

// 移动端响应式优化
@media (max-width: 768px) {
  .article-header {
    padding: 24px 16px 0; // 减小内边距

    .title {
      font-size: 1.5rem; // 减小标题字号
      margin-bottom: 20px; // 减小下边距
      line-height: 1.4; // 优化行高
    }

    .meta-info {
      flex-wrap: wrap; // 允许换行
      gap: 12px; // 设置间距
      margin-bottom: 20px;
      justify-content: center;

      .meta-item {
        margin: 0 8px; // 减小水平间距
        white-space: nowrap; // 防止内容换行

        span, time {
          font-size: 13px; // 稍微减小字号
        }
      }
    }
  }
}

@media (max-width: 576px) {
  .article-header {
    padding: 20px 12px 0;

    .title {
      font-size: 1.3rem;
      margin-bottom: 16px;
    }

    .meta-info {
      gap: 8px;
      margin-bottom: 16px;

      .meta-item {
        margin: 0 6px;

        span, time {
          font-size: 12px;
        }
      }
    }
  }
}

// 横屏优化
@media screen and (orientation: landscape) and (max-height: 576px) {
  .article-header {
    padding: 20px 12px 0;

    .title {
      margin-bottom: 12px;
    }

    .meta-info {
      margin-bottom: 12px;
    }
  }
}
</style>
